<template>
  <!-- 背景 -->
  <div class="bg">
    <div class="title">关注列表</div>

    <div class="apply_table">
      <div class="apply_table_column">
        <div
          class="apply_table_title"
          v-for="(item, index) in attentionColumn"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
      <el-divider></el-divider>
      <div v-if="attentionData.length > 0">
        <div
          class="apply_table_info"
          v-for="(item, index) in attentionData"
          :key="index"
        >
          <div class="apply_info_box">
            <div class="apply_info_image">
              <img
                :src="item.toMemberDetail.supplierInformationCompanyLogoUrl | urlLoad"
                alt=""
                class="image"
              />
            </div>
            <div class="apply_info_text">
              {{ item.toMemberDetail.companyName }}
            </div>
            <div class="apply_info_text">
              {{ item.toMemberDetail.supplierInformationTheMainType }}
            </div>
            <div class="apply_info_btn">
              <div>
                <button @click="showDelDialog(index)" class="btn_del">
                  取消关注
                </button>
              </div>
              <!-- <button @click="delDialog = true" class="btn_del">取消关注</button> -->
            </div>
          </div>
          <el-divider></el-divider>
        </div>
      </div>

      <div class="test" v-else>当前您还没关注任何公司</div>

      <el-dialog
        title="提示"
        :visible.sync="delDialog"
        width="5.71rem"
        center
        class="del_dialog"
      >
        <span>是否取消关注该企业</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="delDialog = false">取消</el-button>
          <el-button type="primary" @click="delAttention(index)"
            >确定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <!-- 分页 -->
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-size="pageSize"
      layout="prev, pager, next, jumper"
      :total="total"
      v-if="attentionData.length > 0"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  created() {
    let info = JSON.parse(sessionStorage.getItem("userInfo"));
    this.userInfo = info;
    this.listFollow();
  },
  data() {
    return {
      attentionColumn: ["公司logo", "公司名称", "主营", "操作"],
      attentionData: [],
      delDialog: false,
      index: 0,
      userInfo: {},
      pageNo: 1,
      pageSize: 10,
      total: 0,
      show: true,
    };
  },
  methods: {
    // 页面切换
    handleCurrentChange(value) {
      this.pageNo = value;
      this.listFollow();
    },
    // 显示取消弹窗
    showDelDialog(index) {
      this.index = index;
      this.delDialog = true;
    },

    // 取消关注
    async delAttention() {
      let res = await this.$apiFun.unFollow({
        toMemberId: this.attentionData[this.index].toMemberId,
      });
      if (res.code == 200 || res.result == true) {
        this.attentionData.splice(this.index, 1);
        this.delDialog = false;
        this.$message({
          duration: 1500,
          message: "操作成功",
          type: "success",
        });
      } else {
        this.$message({
          duration: 1500,
          message: "操作失败",
          type: "error",
        });
      }
    },
    // 关注列表
    async listFollow() {
      let res = await this.$apiFun.listFollow({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        fromMemberId: this.userInfo.id,
      });
      this.attentionData = res.result.rows.map((row) => {
        return { ...row };
      });
      this.total = Number(res.result.total);
    },

    // showBtn(index) {
    //   this.attentionData[index].show = true;
    // },
    // hideBtn(index) {
    //   this.attentionData[index].show = false;
    // },
  },

  watch: {
    "$route.name": {
      handler(newName) {
        if (newName === "myAttentions") {
          this.pageNo = 1;
          this.pageSize = 10;
          this.listFollow();
        }
      },
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-divider--horizontal {
  margin: 0.1rem 0rem;
}
/deep/.el-dialog {
  margin-top: 2rem !important;
  border-radius: 10px;
  .el-dialog__header {
    border-radius: 10px 10px 0px 0px;
    background: #efefef;
    display: flex;
    justify-content: space-between;
    .el-dialog__title {
      margin-left: 0.3rem;
      font-size: 0.2rem;
      font-weight: bold;
      color: #333333;
    }
  }
  .el-dialog__footer {
    height: 0.7rem;
    padding: 0;
    .dialog-footer {
      width: 100%;
      height: 0.4rem !important;
      display: flex;
      justify-content: center;

      .el-button--default {
        width: 2rem;
        height: 0.4rem;
        line-height: 0.1rem;
        background: #ffffff;
        border: 1px solid #333333;
        border-radius: 5px;
        display: block;
      }
      .el-button--primary {
        width: 2rem;
        line-height: 0.1rem;
        height: 0.4rem;
        background: #f42551;
        border-radius: 5px;
        border: none;
        margin-left: 0.3rem;
        display: block;
      }
    }
  }
}
.bg {
  height: 92.5%;
  background: #ffffff;
  box-shadow: 0px 3px 20px 0px rgba(230, 230, 230, 0.8);
  border-radius: 10px;
  padding: 0.3rem 0.5rem;
  .title {
    font-size: 0.24rem;
    font-weight: bold;
    color: #333333;
    text-align: left;
  }
  .apply_table {
    margin-top: 0.5rem;
    .apply_table_column {
      display: flex;
      .apply_table_title {
        flex: 1;
        font-size: 0.16rem;
        font-weight: bold;
        color: #333333;
        line-height: 0.3rem;
        text-align: left;
        margin-left: 0.15rem;
        text-align: center;
        &:first-child {
          text-align: left;
        }
      }
    }
    .apply_table_info {
      .apply_info_box {
        display: flex;
        align-items: center;
        height: 0.6rem;
        .apply_info_image {
          height: 100%;
          text-align: left;
          margin: 0 0.25rem;
          display: flex;
          align-items: center;
          .image {
            width: 0.42rem;
            height: 0.42rem;
            border-radius: 50%;
            display: block;
          }
        }
        .apply_info_text {
          display: block;
          font-size: 0.16rem;
          font-weight: 400;
          color: #333333;
          line-height: 0.3rem;
          margin-left: 1.4rem;
          width: 3rem;
          text-align: center;
          &:nth-child(3) {
            width: 1rem;
            margin-left: 0.5rem;
          }
        }
        .apply_info_btn {
          display: flex;
          justify-content: space-evenly;
          text-align: left;
          margin-left: 1.6rem;
          div {
            width: 100%;
            .btn_del {
              display: block;

              background: none;
              border: none;
              font-size: 0.18rem;
              font-weight: bold;
              color: #333333;
              line-height: 0.3rem;
              cursor: pointer;
            }
          }
        }
      }
    }
  }

  .test {
    font-size: 0.2rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 0.3rem;
    text-align: center;
    margin-top: 0.5rem;
    opacity: 0.7;
  }
  .del_dialog {
    /deep/.el-dialog {
      .el-dialog__body {
        text-align: center;
        span {
          font-size: 0.2rem;
          font-weight: 400;
          color: #333333;
        }
      }
    }
  }
}
// 分页样式
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #f42551;
}
</style>